<html>  
  <head>  
        <meta charset="utf-8">  
        <title>8.1.2 键盘交互</title>  
  </head> 
  <style>
  
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width  = 400;	//SVG绘制区域的宽度
var height = 400;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性

var characters = ["A","S","D","F"];

var rects = svg.selectAll("rect")
				.data(characters)
				.enter()
				.append("rect")
				.attr("x",function(d,i){ return 10 + i * 60; })
				.attr("y",150)
				.attr("width",55)
				.attr("height",55)
				.attr("rx",5)
				.attr("ry",5)
				.attr("fill","black");
				
var texts = svg.selectAll("text")
				.data(characters)
				.enter()
				.append("text")
				.attr("x",function(d,i){ return 10 + i * 60; })
				.attr("y",150)
				.attr("dx",10)
				.attr("dy",25)
				.attr("fill","white")
				.attr("font-size",24)
				.text(function(d){ return d; });
				
				
d3.select("body")
	.on("keydown",function(){
		rects.attr("fill",function(d){
			if( d == String.fromCharCode(d3.event.keyCode) ){
				return "yellow";
			}else{
				return "black";
			}
		});
	})
	.on("keyup",function(){
		rects.attr("fill","black");
	});

	
</script> 

</body>

</html>